<template>
	<BaseContainer class="page-main">
		<GeoMap @map-onload="mapOnLoad" :center="[118.796624, 32.059344]" style="width: 100%; height: 80vh" />
		<div class="nav-tab-box">
			<ul class="menu-ul">
				<li
					class="menu-li"
					v-for="(item, index) in orgTypeDict"
					:class="{ active: item.value == activeTab }"
					:key="index"
					@click="handleTabChange(item)"
				>
					<span>{{ item.label }}</span>
					<img :src="item.icon" class="icon-img" />
					<!-- <img src="@/assets/icons/icon-bed.webp" class="icon-img" /> -->
				</li>
			</ul>
		</div>
		<div class="search-form">
			<AplidForm v-model="searchModel" v-bind="searchConfig" ref="searchRef" @reset="onReset" @submit="onSearch"> </AplidForm>
		</div>

		<div ref="domeEl" style="display:none">
			<MarkerItem :markerItem="markerItem"></MarkerItem>
		</div>
	</BaseContainer>
</template>

<script setup lang="ts">
import GeoMap from '@/views/aplid/GeoMap/index.vue'
import apiMod from '@/apiMod/index'

import { searchConfig } from './config'
import { getAreaObj } from '@/utils/util'
import MarkerItem from './MarkerItem.vue'

const baseMod: any = ref({
	lon: 118.796624,
	lat: 32.059344,
})

const domeEl = ref(null)
const activeTab = ref('1')
const searchModel = ref({})
const orgTypeDict = ref([])
const markerItem = ref({})
let imageList = import.meta.glob(`@/assets/icons/org/*.png`, { eager: true })
const activeItem = computed(() => {
	const temItem = orgTypeDict.value.find((item) => item.value == activeTab.value) || {}
	return temItem.icon
})
const getImage = (name?: string): string => {
	const _default = (name) => {
		return activeItem.value || 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
	}
	if (!name) {
		_default()
	}
	const filePath = Object.keys(imageList).find((val) => val.includes(name))
	if (filePath) {
		const generator: any = imageList[filePath]
		const intance = generator.default
		return intance
	} else {
		_default()
	}
}

const onReset = () => {
	searchModel.value = {}
	getInitData(activeItem.value)
}
const onSearch = (form, done) => {
	searchModel.value = form
	getInitData(activeItem.value)
	done()
}
const setMarker = (arr) => {
	map.clearMap()
	arr.map((item) => {
		const startIcon = new AMap.Icon({
			size: new AMap.Size(38, 36),
			image: item.icon,
			imageSize: new AMap.Size(38, 36),
			imageOffset: new AMap.Pixel(0, 0),
		})
		const marker = new AMap.Marker({
			icon: startIcon,
			position: [item.lon, item.lat],
			offset: new AMap.Pixel(-13, -30),
		})
		map.add(marker)
		marker.on('click', (e) => {
			if (item.isSource == 1) {
				apiMod.view_dpServiceOrgBase_view(item.id).then((res) => {
					markerItem.value = res.data
					// createInfoWindow()
					domeEl.value.style.display = 'block'
				})
			} else {
				apiMod.dpServiceFacility_info(item.id).then((res) => {
					markerItem.value = res.data
					// createInfoWindow()
					domeEl.value.style.display = 'block'
				})
			}
		})
	})
	map.setFitView()
}

const createInfoWindow = () => {
	const infoWindow = new AMap.InfoWindow({
		content: domeEl.value,
		offset: new AMap.Pixel(-13, -30),
	})
	infoWindow.open(map, map.getCenter())
	// map.setCenter(markerEvt ? markerEvt.getPosition() : point);
}
const getInitData = (icon) => {
	domeEl.value.style.display = 'none'
	const areasObj: any = getAreaObj(searchModel.value?.areas || [], '')
	if (activeTab.value == 'org') {
		apiMod
			.view_dpServiceOrgBase_map({
				organizationName: searchModel.value.organizationName,
				organizationLevel: searchModel.value.organizationLevel,
				...areasObj,
				pageParaPO: {
					size: 1000,
				},
			})
			.then((res) => {
				const data = res.data.records
					.filter((item) => item.lon && item.lat)
					.map((item) => {
						item.icon = icon || getImage('养老机构')
						item.isSource = 1
						return item
					})
				setMarker(data)
			})
	} else {
		apiMod
			.view_dpServiceFacility_map({
				type: activeTab.value,
				soleValue: searchModel.value.organizationName,
				standard: searchModel.value.organizationLevel,
				...areasObj,
				pageParaPO: {
					size: 1000,
				},
			})
			.then((res) => {
				const data = res.data.records
					.filter((item) => item.lon && item.lat)
					.map((item) => {
						item.icon = icon || getImage(item.typeLabel)
						item.isSource = 2
						return item
					})
				setMarker(data)
			})
	}
}
const handleTabChange = (item) => {
	activeTab.value = item.value
	getInitData(activeItem.value)
}
const mapOnLoad = (map, AMap) => {
	window.map = map
	window.AMap = AMap
}

onMounted(() => {
	apiMod.getDictItemList('FACILITY_TYPE').then((res) => {
		const data = res.data
		orgTypeDict.value = [...data['FACILITY_TYPE'], { label: '养老机构', value: 'org' }].map((item) => {
			item.icon = getImage(item.label)
			return item
		})
	})
})
</script>

<style scoped lang="scss">
.search-form {
	position: absolute;
	top: 5vh;
	right: 2vw;
	width: 70%;
}
.nav-tab-box {
	--base-color: #000;
	position: absolute;
	top: 4em;
	left: 3em;
	display: flex;
	z-index: 999;
	gap: 20px;
	background: #ffffffe0;
	padding: 10px;
	border-radius: 10px;
	.menu-ul {
		display: flex;
		flex-flow: column;
		gap: 4px;
		border-right: 1px solid #eee;
		padding: 0 4px;
		.active {
			--base-color: #1890ff;
			&:after {
				content: '';
				position: absolute;
				width: 2px;
				height: 100%;
				background: #ed7b2f;
				border-radius: 10px;
				right: -5px;
				top: 0;
			}
			.icon-img {
				background-color: #1890ff;
			}
		}
		.menu-li {
			cursor: pointer;
			color: var(--base-color);
			text-align: right;
			text-shadow: -3px 5px 3px rgb(215 212 212);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 10px;
			position: relative;
			.icon-img {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background-color: #fff;
				padding: 6px;
			}
		}
	}
}
</style>
